import React, { Ref, PropsWithChildren } from 'react';

import './index.less';

interface BaseProps {
  className: string;
  [key: string]: unknown;
}

export const ToolbarButton = React.forwardRef(
  (
    {
      active,
      reversed,
      ...props
    }: PropsWithChildren<
      {
        active: boolean;
        reversed: boolean;
      } & BaseProps
    >,
    ref: Ref<HTMLSpanElement>,
  ) => (
    <span
      {...props}
      ref={ref}
      className="toolbar-btn"
      style={{
        color: reversed ? (active ? 'white' : '#aaa') : active ? 'black' : '#ccc',
      }}
    />
  ),
);

export const Icon = React.forwardRef(
  ({ className, ...props }: PropsWithChildren<BaseProps>, ref: Ref<HTMLSpanElement>) => (
    <span
      {...props}
      ref={ref}
      className="material-icons"
    />
  ),
);

export const Menu = React.forwardRef(
  ({ ...props }: PropsWithChildren<BaseProps>, ref: Ref<HTMLDivElement>) => (
    <div {...props} ref={ref} className="menu" />
  ),
);

export const Toolbar = React.forwardRef(
  ({ className, ...props }: PropsWithChildren<BaseProps>, ref: Ref<HTMLDivElement>) => (
    <Menu {...props} ref={ref} className="toolbar" />
  ),
);
